import { Allotment } from "allotment"
import "allotment/dist/style.css"
import React from "react";
import Header from "./components/Header";
import Setting from "./components/Setting";
import EditArea from "./components/EditArea";
import MaterialWrapper from "./components/MaterialWrapper";
import { useComponentStore } from "./stores/components";
import Preview from "./components/Preview";

const ReactPlayground: React.FC = () => {

  const { mode } = useComponentStore()

  return <div className="h-[100vh] flex flex-col">
    <div className="h-[60px] flex items-center border-b-[1px] border-b-[#ccc]">
      <Header />
    </div>
    {
      mode === 'edit'
        ? <Allotment>
          <Allotment.Pane preferredSize={240} maxSize={300} minSize={200}>
            <MaterialWrapper />
          </Allotment.Pane>
          <Allotment.Pane>
            <EditArea />
          </Allotment.Pane>
          <Allotment.Pane preferredSize={450} maxSize={500} minSize={300}>
            <Setting />
          </Allotment.Pane>
        </Allotment> : <Preview />
    }
  </div>
}

export default ReactPlayground;